revision:
The property sets or returns the text content of the specified node and its descendants.
This property is similar to the "innerText property"; in fact getting the outerText returns the same result as getting the innerText property.
There is an important difference when setting an element's outerText, because the element itself is removed.
Syntax:
node.outerText : returns the text content of a node: a string, representing the text content of a node and all its descendants.
node.outerText = text : sets the text content of a node (replacing the entire node).
property value:
text : string - specifies the text content to insert
example
When setting the outerText, the entire element gets replaced.
Click the button to change (and remove) the h5 element:
<div>
<h5>Set outertext</h5>
<p>When setting the outerText, the entire element gets replaced.</p>
<p>Click the button to change (and remove) the h5 element:</p>
<button onclick="firstFunction()">Change Header</button>
</div>
<script>
function firstFunction() {
const x = document.getElementsByTagName("h5")[0];
x.outerText = "Changed content!";
}
</script>